<template>
  <div>
    <div class="heard_top" ref="myli" style="display: none">
      <div class="heard_top_div">
        <div class="heard_top_first">
          <img src="../assets/img/header-footer/search_1.png" alt="" />
          <input type="text" placeholder="Search" />
        </div>
        <div class="heard_top_last">
          <img
            src="../assets/img/header-footer/search_2.png"
            alt=""
            @click="Black"
          />
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="heard_new" :class="navFixed == true ? 'sticky' : ''">
      <div class="heard">
        <div class="heard_first">
          <img src="../assets/img/attract/LOGO-1-1.png" alt="" />
        </div>
        <ul class="heard_second">
          <li
            v-for="(item, index) in banana"
            :key="index"
            @mouseover="selectNav(item.title)"
            @mouseout="mousetout(item.title)"
            @click="selectBar(item.title)"
          >
            <img
              :src="isSelect == item.title ? item.img_b : item.img_a"
              alt="item.title"
            />
            <span :class="isSelect == item.title ? 'active' : ''">
              {{ item.title }}
            </span>
          </li>
        </ul>
        <div class="heard_third">
          <div>
            <span>1</span>
            <img
              src="../assets/img/header-footer/nav_8.png"
              alt=""
              @mousemove="show"
              @mouseout="close"
            />
            <div class="shopping" ref="row" style="display: none">
              <div class="shopping_first">
                <p>购物车里没有产品</p>
              </div>
              <div class="shopping_last">
                <button>
                  <p>购物车</p>
                  <img
                    src="../assets/img/header-footer/nav_7_active.png"
                    alt=""
                  />
                </button>
                <p>合计: ￥{{ tatal }}</p>
              </div>
            </div>
          </div>
          <div>
            <img
              src="../assets/img/header-footer/nav_9.png"
              alt=""
              @click="Rawis"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelect: "",
      navFixed: false,
      tatal: 0.0,
      banana: [
        {
          title: "首页",
          img_a: require("../assets/img/header-footer/nav_1.png"),
          img_b: require("../assets/img/header-footer/nav_1_active.png"),
        },
        {
          title: "关于港纪",
          img_a: require("../assets/img/header-footer/nav_2.png"),
          img_b: require("../assets/img/header-footer/nav_2_active.png"),
        },
        {
          title: "产品目录",
          img_a: require("../assets/img/header-footer/nav_3.png"),
          img_b: require("../assets/img/header-footer/nav_3_active.png"),
        },
        {
          title: "品牌招商",
          img_a: require("../assets/img/header-footer/nav_4.png"),
          img_b: require("../assets/img/header-footer/nav_4_active.png"),
        },
        {
          title: "新闻资讯",
          img_a: require("../assets/img/header-footer/nav_5.png"),
          img_b: require("../assets/img/header-footer/nav_5_active.png"),
        },
        {
          title: "购物商城",
          img_a: require("../assets/img/header-footer/nav_6.png"),
          img_b: require("../assets/img/header-footer/nav_6_active.png"),
        },
        {
          title: "商户详情",
          img_a: require("../assets/img/header-footer/nav_7.png"),
          img_b: require("../assets/img/header-footer/nav_7_active.png"),
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.watchScroll);
  },
  methods: {
    selectNav(title) {
      console.log(title);
      this.isSelect = title;
      sessionStorage.setItem("isSelect", this.isSelect);
    },
    mousetout(title) {
      console.log(title);
      this.isSelect = "";
    },
    selectBar(title) {
      this.isSelect = title;
      switch (title) {
        case "首页":
          this.$router.push("/");
          break;
        case "关于港纪":
          this.$router.push("/about");
          break;
        case "产品目录":
          this.$router.push("/product");
          break;
        case "品牌招商":
          this.$router.push("/zhaoshang");
          break;
        case "新闻资讯":
          this.$router.push("/news");
          break;
        case "购物商城":
          this.$router.push("/mark");
          break;
        case "商户详情":
          this.$router.push("/denglu");
      }
    },
    Rawis() {
      this.$refs.myli.style.display = "block";
    },
    Black() {
      this.$refs.myli.style.display = "none";
    },
    watchScroll() {
      // 获取导航栏底部到顶部可见区域的高度
      // this.navHeight = this.$refs.nav.clientHeight;
      // console.log(" conHeight :", this.navHeight);
      // 获取滚动条距离顶部的高度
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      console.log(scrollTop);
      //当滚动超过
      if (scrollTop > 100) {
        this.navFixed = true;
      } else {
        this.navFixed = false;
      }
    },
    show() {
      this.$refs.row.style.display = "block";
    },
    close() {
      this.$refs.row.style.display = "none";
    },
  },
};
</script>

<style lang="scss" scoped>
.heard_top {
  width: 100%;
  height: 50px;
  background-color: #262626;
  .heard_top_div {
    width: 1250px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    .heard_top_first {
      width: 90%;
      display: flex;
      img {
        width: 12.8px;
        height: 12.8px;
        margin-top: 20px;
      }
      input {
        margin-left: 10px;
        color: #9d9d9d;
      }
    }
    .heard_top_last {
      width: 10%;
      img {
        width: 12.8px;
        height: 12.8px;
        margin-top: 20px;
      }
    }
  }
}
.heard_new{
  width: 100%;
  height: 100px;
  background-color: #fff;
  .heard {
  width: 1300px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;
  .heard_first {
    width: 100px;
    padding-top: 7px;
    img {
      width: 89.3px;
      height: 90px;
    }
  }
  .heard_second {
    margin-left: 200px;
    width: 800px;
    height: 100px;
    display: flex;
    li {
      width: 114.5px;
      height: 100px;
      position: relative;
      cursor: pointer;
      img {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 46%;
        left: 15%;
      }
      span {
        position: absolute;
        top: 45%;
        left: 34%;
        font-size: 14px;
      }
      span.active {
        color: #f0f0f0;
      }
      &:hover {
        background-color: #7a5b4a;
      }
    }
  }
  .heard_third {
    width: 200px;
    display: flex;
    z-index: 999;
    div:first-child {
      width: 100px;
      height: 100px;
      position: relative;
      span {
        position: absolute;
        color: #9d9d9d;
        font-weight: bold;
        top: 43px;
        left: 42px;
        font-size: 14px;
      }
      img {
        position: absolute;
        width: 34px;
        height: 38px;
        top: 30px;
        left: 30px;
      }
      .shopping {
        width: 265px;
        height: 95px;
        background-color: #262626;
        border: 15px solid #262626;
        position: absolute;
        top: 100px;
        right: 11px;
        .shopping_first {
          width: 100%;
          height: 35px;
          border-bottom: 1px solid #9d9d9d;
          line-height: 35px;
          p {
            color: #9d9d9d;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
          }
        }
        .shopping_last {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: space-between;
          padding-top: 10px;
          button {
            width: 89px;
            height: 25px;
            background-color: #7a5b4a;
            border: 1px solid #f0f0f0;
            p {
              font-size: 12px;
              color: #f0f0f0;
              font-weight: bold;
              margin-left: -23px;
              line-height: 20px;
            }
            img {
              margin-top: 18px;
              margin-left: 28px;
            }
          }
          p {
            font-size: 12px;
            color: #9d9d9d;
            line-height: 30px;
            font-weight: bolder;
            line-height: 30px;
            margin-right: 7px;
          }
        }
      }
    }

    div:last-child {
      width: 100px;
      img {
        width: 19px;
        height: 20px;
        margin-top: 44%;
      }
    }
  }
}
}

// 是否吸顶，判断其操作
.sticky {
  position: fixed;
  width: 100%;
  top: 0px;
  // 让其居中，50%为居中，减去导航栏宽度的一半
  // left: calc(50% - 650px);
  z-index: 999;
  width: 100%;
  height: 100px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 11%);
  background-color: #fff;
}
</style>
